<template> 
    <section class="content">
        <div class="section-block">
            <div class="shadow-block">
                <span>Education</span>
                <h1 style="fontSize:40px">{{ $t('langObj.educationPlatform') }}</h1>
                <p>{{ $t('langObj.platformDesc') }}</p>
            </div>
            <hgroup class="hgroup-block">
                <h2>{{ $t('langObj.course') }}</h2>
                <Select style="width:180px;" @on-change="filterCourse"  v-model="defaultClassification">
                    <Option v-for="item in allClass" :value="item.id" :key="item.id">
                        {{ item.name }}
                    </Option>
                </Select>
            </hgroup>
            <div class="subject-block">
                <div v-for="item in showClassCourse" :key="item.id" class="subject-title">
                    <p>|&nbsp;&nbsp;{{ item.name }}</p>
                    <div>
                        <education-item v-for="(value,index) in item.causes" :key="value.id" :item="item.causes[index]"></education-item>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import { mapActions } from 'vuex';
import educationItem from '../../components/education/educationItem';
export default {
    components:{educationItem},
    data(){
        return{
            defaultClassification:-1,
            allClass:[],
            showClassCourse:[],
        }
    },
    methods:{
        ...mapActions(['XallClass','XclassCourseList']),
        filterCourse(optionId){
            this.XclassCourseList(optionId === -1? "":optionId).then(res => {
                this.showClassCourse = res.data
            })
        },
        async mountedCourse(){
            let [allClass,allClassCourse] = await Promise.all([this.XallClass(),this.XclassCourseList()]);
            this.allClass = allClass.data;
            this.allClass.unshift({id:-1,name:this.$t('langObj.all')});
            this.showClassCourse = allClassCourse.data 
        }
    },
    mounted() {
        this.mountedCourse()
    },
}
</script>


<style lang="scss" scoped>
    .content{
        flex:1;
        min-width: 1200px;
        padding: 20px;
        background-image: url(../../assets/images/education.png);
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-size: 100% 1078px;
    }

    .section-block{
        width: 1200px;
        margin: 0 auto;

        .shadow-block{
            height:256px;
            padding:50px;
            background:rgba(255,255,255,1);
            opacity:0.8;
            border-bottom: 1px solid #f7f7f7;
            span{
                font-size:12px;
                font-weight:400;
                color:rgba(77,90,106,1);
            }
            p{
                margin-top:20px;
                font-size:18px;
                font-weight:400;
                color:rgba(51,51,51,1);
            }
        }

        .hgroup-block{
            height: 100px;
            padding:0 25px;
            background-color: #fff;
            display: flex;
            align-items: center;
            border-bottom:1px solid #f7f7f7;
            h2{
                padding: 0 20px;
                margin-right: 20px;
                font-weight: 700;
                border-left: 4px solid #C2142F;
            }
        }

        .subject-block{
            padding:20px;
            background-color: #fff;
            .subject-title{
                width: 1200px;

                p{
                    font-size:18px;
                    font-weight:600;
                    color:rgba(102,102,102,1);
                }
                div{
                    display: flex;
                    flex-wrap: wrap;
                }
            }
        }
        
    }
</style>
